<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>煤球对战平台 - 注册</title>
	<link rel="stylesheet" href="home/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="home/css/index.css">
	<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
		.main { margin-top: 1%; }
		#logbtn { background-color: gray; }
		#veryfy { width: 50%; float: left; margin-right: 1em; }
		#user_phone { width: 68%; float: left; margin-right: 1em; }
		#phoneyzm { width: 68%; float: left; margin-right: 1em; }
		#emailyzm { width: 68%; float: left; margin-right: 1em; }
		.verifyimg { float: left; }

		.form-bg{
		    background: #00b4ef;
		}
		.form-horizontal{
		    background: #fff;
		    padding-bottom: 40px;
		    border-radius: 15px;
		    text-align: center;
		}
		.form-horizontal .heading{
		    display: block;
		    font-size: 35px;
		    font-weight: 700;
		    padding: 25px 0;
		    border-bottom: 1px solid #f0f0f0;
		    margin-bottom: 30px;
		}
		.form-horizontal .form-group{
		    padding: 0 40px;
		    margin: 0 0 25px 0;
		    position: relative;
		}
		.form-horizontal .form-control{
		    background: #f0f0f0;
		    border: none;
		    border-radius: 20px;
		    box-shadow: none;
		    padding: 0 20px 0 45px;
		    height: 40px;
		    transition: all 0.3s ease 0s;
		}
		.form-horizontal .form-control:focus{
		    background: #e0e0e0;
		    box-shadow: none;
		    outline: 0 none;
		}
		.form-horizontal .form-group i{
		    position: absolute;
		    top: 12px;
		    left: 60px;
		    font-size: 17px;
		    color: #c8c8c8;
		    transition : all 0.5s ease 0s;
		}
		.form-horizontal .form-control:focus + i{
		    color: #00b4ef;
		}
		.form-horizontal .fa-question-circle{
		    display: inline-block;
		    position: absolute;
		    top: 12px;
		    right: 60px;
		    font-size: 20px;
		    color: #808080;
		    transition: all 0.5s ease 0s;
		}
		.form-horizontal .fa-question-circle:hover{
		    color: #000;
		}

		.form-horizontal .text{
		    float: left;
		    margin-left: 7px;
		    line-height: 20px;
		    padding-top: 5px;
		}
		.form-horizontal .btn{
		    float: right;
		    font-size: 14px;
		    color: #fff;
		    background: #00b4ef;
		    border-radius: 30px;
		    padding: 10px 25px;
		    border: none;
		    text-transform: capitalize;
		    transition: all 0.5s ease 0s;
		}
		@media only screen and (max-width: 479px){
		    .form-horizontal .form-group{
		        padding: 0 25px;
		    }
		    .form-horizontal .form-group i{
		        left: 45px;
		    }
		    .form-horizontal .btn{
		        padding: 10px 20px;
		    }
	</style>
	<script src="home/js/jquery-1.11.1.min.js"></script>
	<!--[if IE]>
	<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
    <div class="container">
        <div class="row main" id="login">
            <div class="col-md-offset-3 col-md-6">
                <form class="form-horizontal" action="" method="post">
                	{!! csrf_field() !!}
									<span class="heading">用户认证中心</span>
									<div class="form-group">
											<input type="text" class="form-control" name="user_truename" placeholder="真实姓名" id="user_truename">
											<i class="fa fa-user"></i>
											<span id="usernm" style:"color:red"></span>
									</div>
									<div class="form-group">
											<input type="text" class="form-control" id="user_idcard" name="user_idcard" placeholder="身份证号" id="user_idcard">
											<i class="fa fa-user"></i>
									</div>
									<div class="form-group">
											<input type="text" class="form-control" id="user_question" name="user_question" placeholder="密保问题" id="user_question">
											<i class="fa fa-lock"></i>
									</div>
									<div class="form-group">
											<input type="text" class="form-control" id="user_answer" name="user_answer" placeholder="密保答案">
											<i class="fa fa-lock"></i>
									</div>
									<div class="form-group">
											<input type="text" class="form-control" id="user_email" name="user_email" placeholder="邮箱" id="user_email">
											<i class="fa fa-lock"></i>
									</div>
									<div class="form-group">
											<input type="text" class="form-control" id="emailyzm" name="emailyzm" placeholder="邮箱验证码">
											  <i class="fa fa-lock"></i>
											  <a href="javascript:void(0);" id="email" class="btn btn-seccess">发送验证码</a>
											
									</div>
									<div class="form-group">
											<input type="phone" class="form-control" id="user_phone" name="user_phone" value="{{$user_phone->user_phone}}" readonly>
											  <i class="fa fa-phone"></i>
											  <a href="javascript:void(0);" id="logbtn" class="btn btn-info" onclick="bian()">修改手机号</a>
									</div>
									<div class="form-group">
											<input type="text" class="form-control" id="phoneyzm" name="phoneyzm" placeholder="手机验证码">
											  <i class="fa fa-lock"></i>
											 <a href="javascript:void(0);" id="phone" class="btn btn-seccess">发送验证码</a>
									</div>
									<div class="form-group">
									 									</div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="veryfy" id="veryfy" placeholder="点击刷新验证码">
                        <img src="{{url('/verify')}}" id="verifyimg" class="pull-left">
                        <i class="fa fa-lock"></i>
                    </div>

                    <div class="form-group">
                        <input type="submit" id="sub" class="btn btn-seccess" value="提交认证信息">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

	<script src="home/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	 function bian(){
	  	$('#user_phone').prop('readonly',false);
	 }
	$('#phone').click(function (){
	 		$.ajax({
			url:'/send',
			type:'POST',
			data:{"input":$('#user_phone').val()},
			async:true,
			success:function(ev){
				alert('验证码发送成功,请注意查收');
			},
			error:function(ev){
				alert('验证码发送失败,请重试');
			}
		});
	});
	$('#email').click(function (){
	 		$.ajax({
			url:'/email',
			type:'POST',
			data:{"input":$('#user_email').val()},
			async:true,
			success:function(ev){
				alert('验证码发送成功,请注意查收');
			},
			error:function(ev){
				alert('验证码发送失败,请重试');
			}
		});
	});
	</script>
</html>
